<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../libs/bootstrap-3.3.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <div class="div-echart ">
        <div id="main" style="width: 100%;height:500px;" class="center-block">
        </div>
    </div>
    <div id="listCon">
    </div>
</div>
<script type="text/javascript" src="../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../assets/js/common/main-min.js"></script>
<script type="text/javascript" src="../../assets/js/config-min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>

<script type="text/javascript">
    BUI.use('common/page');
    var month = getQueryString('month');
    var userId = getQueryString('id');
    var userName = getQueryString('userName');
    var seriesData = [];
    $.ajax({
        type: "POST",
        url: ctx + "/salary/staffSalarySpreadInMonth",
        data:{
            month : month,
            userId : userId
        },
        success: function(data){
            if(data.code == 200){
                setlist('#listCon',data.data);

                //只显示前15
                var after15v = 0;
                for(var i=0;i<data.data.length;i++){
                    if(i>14){
                        after15v+=data.data[i].projectSalary;
                    }else{
                        seriesData[i]={
                            value:data.data[i].projectSalary.toFixed(2), name:data.data[i].projectCode + "-" + data.data[i].projectName
                        };
                    }
                }
                if(data.data.length>15){
                    seriesData.push({value:after15v.toFixed(2), name:'其他'});
                }
                setEchart('main')
            } else {
                alert('['+userName+']'+data.msg);
                window.location.href = "list.html";
            }
        }
    });

    function setlist(eleid, obj) {
        var html = '<div class=div-list><table class="table table-bordered table-hover table-striped m10"><tr><th>项目编号</th><th>项目名称</th><th>人工成本</th><th>占比</th>';
        for(var i=0;i<obj.length;i++){
            html+= '<tr><td>'+obj[i].projectCode+'<td>'+obj[i].projectName+'<td>'+obj[i].projectSalary.toFixed(2)+'<td>'+(obj[i].ratio*100).toFixed(2)+'%';
        }
        html += '</table></div>'
        $(eleid).append(html);
    }

    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title : {
                text: userName+'\n员工人工成本分布图',
                subtext:'年月：'+month,
                x:'center',
                top:15
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b}<br/>{c}元 ({d}%)"
            },
            series : [
                {
                    name: '',
                    type: 'pie',
                    radius : '65%',
                    center: ['50%', '52%'],
                    data:seriesData,
                    itemStyle:{
                        normal:{
                            label:{
                                show: true,
                                formatter: '{b} : {c} ({d}%)'
                            },
                            labelLine :{show:true}
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

    $("#backbtn").click(function () {
        window.location.href = "list.html";
    });
</script>
</body>
</html>